{extend name="layout/layout" /}

{block name="style"}
	<style type="text/css">

		.list{
			margin-bottom: 30px;
		}
		.cart-index{
			padding-bottom: 50px;
		}
		.bus-container{
			margin-bottom: 8px;
			background: #fff;
		}

		.bus-container .title{
			height: 45px;
			line-height: 45px;
			border-bottom: 1px solid #ddd;
			padding: 0 5px;
			position: relative;
		}

		.bus-name{
			margin-left: 30px;
		}

		.select-icon{
			width: 20px;
			height: 20px;
		}

		.bus-icon{
			position: absolute;
			left: 5px; 
			top: 5px;
		}

		.goods-list{

		}

		.goods-list .item{
			display: flex;
			border-bottom:  1px solid  rgba(0,0,0,0.1);
			padding: 3px;
		}

		.goods-detail{
			padding: 0 5px;
		}

		.goods-detail p{
			margin-bottom: 2px;
		}

		.choose{
			line-height: 60px;
		}

		.number-container{
			border: 1px solid  rgba(0,0,0,.2);
			height: 30px;
			line-height: 28px;
			text-align: center;
			border-radius: 3px;
			color:#8f8f94;
		}


		.number-container input{
			margin: 0;
			padding: 0 5px;
			height: 28px;
			border-top: 0;
			border-bottom: 0;
			border-radius: 0;
			text-align: center;
			font-size:14px;
		}

		.goods-price{
			line-height: 30px;
			font-size: 14px;
		}

		.opear{
			position: fixed;
			bottom: 48px;
			left: 0;
			height: 50px;
			width: 100%;
			line-height: 50px;
			border-top: 1px solid #eee;
			background: #fff;
		}

		.opear .submit-btn{
			background:  #e60012;
			color:#fff;
			text-align: center;
		}

		.opear .select-all{
			padding-left: 5px;
		}

		.opear .total-price{
			padding-right: 10px;
			color:#4A4F52;
		}

		.recommend{
			background: #fff;
			margin-top: 5px;
			
		}

		.recommend .mui-row{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}

		.recommend .recommend-title{
			line-height: 40px;
			color:#fff;
			border-bottom: 1px solid #ccc;
			background: url('/assets/mobile/images/index_bg.png');
		}

		.recommend .goods-name{
			font-size:12px;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			text-align: left;
			height: 42px;
		}

		.recommend p{
			margin-bottom: 5px;
		}

		.recommend .mui-col-xs-6{
			padding: 5px;
			background: #fff;
		}

		.recommend img{
			height: 197px;
		}

		


		.recommend .price{
			color:#e60012;
		}

		.no-list{
			padding: 20px 0;
		}

		.no-list img{
			width: 80px;
		}
	</style>
{/block}

{block name="main"}
	<div class="cart-index" v-cloak>
		<div class="list">

			<div class=""  v-if="detail.seller.length > 0">
				<div class="bus-container" v-for="bus in detail.seller">
					<div class="title">
						<div class="bus-icon" @tap="selectedBus(bus)">
							<img class="select-icon" :src="bus.checked==true?'/assets/img/selected.png':'/assets/img/she.png'" alt="">
						</div>
						<div class="bus-name">{{bus.seller_name}}</div>
					</div>


					<div class="goods-list">
						<div class="item mui-row" v-for="goods in bus.products">
							<div class="choose mui-col-xs-1 mui-text-center" @tap="selected(goods)" >
								<img class="select-icon" :src="goods.checked==true?'/assets/img/selected.png':'/assets/img/she.png'" alt="">
							</div>
							<div class="mui-col-xs-11">
								<div class="mui-row" >
									<div class="goods-img mui-col-xs-2">
										<img :src="goods.original_image" class="img-responsive" alt="">
									</div>
									<div class="goods-detail mui-col-xs-10">
										<p>{{goods.goods_name}}</p>
										<p v-if="goods.spec_name">{{goods.spec_name}}</p>
										<div class="price-number mui-row">
											<div class="text-theme mui-col-xs-8 goods-price">￥{{goods.price}} 积分可抵扣{{goods.point}}元</div>
											<div class="goods-number mui-col-xs-4">
												<div class="mui-row number-container">
													<div class="minus mui-col-xs-3" @tap="minusNumber(goods)">-</div>
													<div class="number mui-col-xs-6">
														<input class="number-input" @change="editNumber(goods)" v-model="goods.number" type="number" />
													</div>
													<div class="push mui-col-xs-3" @tap="pushNumber(goods)">+</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>	
			</div>

			<div class="no-list mui-text-center" v-else>
				<div class="tip-img">
					<img src="/assets/mobile/images/cart_n.png" alt="" class="img-responsive">
				</div>
				<p>
					购物车还没有商品	
				</p>
			</div>
		</div>

		<!-- 为你推荐开始 -->
		<div class="mui-row  recommend">
			<div class="recommend-title mui-text-center">为您推荐</div>
			<div class="mui-row">
				<div class="mui-col-xs-6" v-for="rec in detail.recommend">
					<a :href="'/mobile/goods/detail/id/'+rec.id">
						<img :src="rec.original_image" class="img-responsive" alt="">
						<p class="">
							<span class="price">积分抵扣 {{rec.point}} 元</span>
							<span class="del-price mui-pull-right">￥{{rec.shop_price}}</span>
						</p>
						<p class="">
							<span class="price">VIP收益 {{rec.sendmoney}} 元</span>
							<span class="del-price mui-pull-right">销量:{{rec.sale_number}}件</span>
						</p>
						<p class="goods-name ellipsis-2">{{rec.goods_name}}</p>
					</a>
				</div>
			</div>
		</div>
		<!-- 为你推荐结束 -->

		<div class="opear mui-row">
			<div class="select-all mui-col-xs-3" @tap="selectAll()">
				<img class="select-icon" :src="allStatus==true?'/assets/img/selected.png':'/assets/img/she.png'" alt=""> 全选
			</div>
			<div class="total-price mui-col-xs-6 mui-text-right">
				合计:
				<span class="text-theme">￥<b>{{totalPrice}}</b></span>
			</div>
			<div class="submit-btn mui-col-xs-3" @tap="toConfirm()">结算({{totalNumber}})</div>
		</div>
	</div>
{/block}

{block name="script"}
	<script>

		var indexVue = new Vue({
			el:'.cart-index',
			data: {
				detail:{
					seller: [],
					recommend:[]
				},
				totalPrice: 0,
				totalNumber: 0,
				allStatus: false,
			},
			mounted: function(){
				if(!token){
					location.href = '/mobile/user/login';
				}
				this.getCartList();
			},
			methods: {
				getCartList: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var url = 'cart/index';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.detail = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//选中单件商品
				selected: function(goods){
					if(typeof(goods.checked) == 'undefined'){
						this.$set(goods,"checked",true);
					} else {
						goods.checked = !goods.checked;
					}
					this.calculatePrice();
				},

				//选中商家
				selectedBus: function(bus){
					var status = true;
					if(typeof(bus.checked) == 'undefined'){
						this.$set(bus,"checked",true);
					} else {
						status = false;
					}
					bus.checked = status;

					_this = this;

					bus.products.forEach(function(goods){
						_this.selected(goods);
					});

				},
				//全选
				selectAll: function(){
					_this = this;
					_this.allStatus = !_this.allStatus;

					_this.detail.seller.forEach(function(bus){
						bus.products.forEach(function(goods){
							if(typeof(goods.checked) == 'undefined'){
								_this.$set(goods,"checked",_this.allStatus);
							} else {
								goods.checked = _this.allStatus;
							}
						});
					})
					this.calculatePrice();
				},
				//加数量
				pushNumber: function(goods){
					goods.number++;
					if(goods.number > goods.store_count){
						goods.number = goods.store_count;
						mui.toast('库存不足');
					}
					this.editNumber(goods);
				},
				//减数量
				minusNumber: function(goods){
					goods.number--;
					if(goods.number<=0){
						goods.number = 1;
						mui.toast('最少1件');
					}
					this.editNumber(goods);
				},

				//计算价格
				calculatePrice: function(){
					this.totalNumber = 0;
					this.totalPrice = 0;
					_this = this;
					_this.detail.seller.forEach(function(bus){
						if(typeof(bus.checked) == 'undefined'){
							_this.$set(bus,"checked",false);
						}
						var proNum = bus.products.length;
						var i= 0;
						bus.products.forEach(function(goods){
							if(goods.checked){
								i++;
								_this.totalPrice += goods.number*goods.price;
								_this.totalNumber += parseInt(goods.number);
							}
						});

						//商家商品数量等于选中数量，更改商家为选中
						if(i == proNum){
							bus.checked = true;
						} else {
							bus.checked = false;
						}
					})
				},
				//更改数量
				editNumber: function(goods){
					var that = this;
					that.calculatePrice();
					var url =  'cart/editCart';
					request(that, {'url': url, 'data': {id:goods.id, number:goods.number}}, function(res){
						if(res.code != 200) {
							mui.toast(res.msg);
						}
					});
				},

				//确认订单
				toConfirm: function(){
					var ids = [];
					_this = this;
					_this.detail.seller.forEach(function(bus){
						bus.products.forEach(function(goods){
							if(goods.checked){
								ids.push(goods.id);
							}
						});
					})
					if(ids.length == 0){
						mui.toast('请选择要结算的商品');
						return ;
					}

					var ids_str = ids.toString();
					location.href="/mobile/order/confirmOrder/type/cart/cart_ids/"+ids_str;
				}
			}
		});
	</script>
{/block}